<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3%20(1).js"></script>
    <script type="text/javascript">
         //点击搜索
        $(document).on("click", '[name="submit"]', function () {
            var flightDate = $('[name="flightDate"]').val();
            var takeCityName = $('[name="takeCityName"]').val();
            var landingCityName = $('[name="landingCityName"]').val();
            $.get("po/show", {
                "flightDate": flightDate,
                "takeCityName": takeCityName,
                "landingCityName": landingCityName,
            }, function (indexs){
                show(indexs)
            })
        })

         //点击查询机票
         $(document).on("click",'[name="select"]',function () {
             var tr = $(this).closest("tr")
             var id = $(this).data('id');
             var index = $(this).data("index");  // 获取当前行的索引
             var button = $(this);  // 保存当前按钮元素
             var currentRow = button.closest("tr");

             // 检查当前行下面是否已经插入了机票信息行
             if (currentRow.next().hasClass("ticket-info")) {
                 // 如果已经插入了，返回，不再插入
                 return;
             }
             $.get("po/selectById", {"id": id}, function (data) {
                 for (var i = 0; i < data.length; i++) {
                     // 根据 tic[i] 生成要附加的行内容
                     var newRow = "<tr class='ticket-info'>\n" +  // 添加 ticket-info 类
                         "    <td colspan='1'>" + data[i].sellCompany + "</td>\n" +
                         "    <td colspan='1'>" + data[i].ticketPrice + "</td>\n" +
                         "</tr>";
                     tr.after(newRow);
                 }


             })
         })

             //搜索回调函数
             function show(indexs) {
                 $('#flightTableBody').empty();
                 for (var i = 0; i < indexs.length; i++) {
                     var tableBody = $('#flightTableBody');
                     var row = `<tr style="text-align: center">
            <td>${indexs[i].airline} ${indexs[i].flightCode}/${indexs[i].type}</td>
            <td>${indexs[i].takeTime}-${indexs[i].landingTime}</td>
            <td>${indexs[i].takeAirportName}<br/>${indexs[i].landingAirportName}</td>
            <td>${indexs[i].flightTime}</td>
            <td>${indexs[i].stopAirport}</td>
            <td>${indexs[i].referencePrice}<br/><input type="button" name="select" value="查询机票" data-id="${indexs[i].id}"></td>
        </tr>`;
                     tableBody.append(row);
                 }
             }


    </script>

</head>
<body>

<h1 style="text-align: center">航班查询</h1>
<div style="text-align: center">
    日期:<input type="text" name="flightDate">城市:<input type="text" name="takeCityName">到<input type="text"name="landingCityName"><input
        type="submit" value="搜索" name="submit">
</div>

<div style="text-align: center">
    <table border="2" style="margin: auto; width: 80%;">
        <thead>
        <tr style="text-align: center">
            <td>航空公司/航班类型</td>
            <td>起降时间</td>
            <td>机场</td>
            <td>飞行时长</td>
            <td>经停</td>
            <td>参考报价</td>
        </tr>
        </thead>
        <tbody id="flightTableBody">

        </tbody>

    </table>
</div>


</body>
</html>